<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes move {
            0% {
                background-color: greenyellow;
                transform: translateX(0px);
            }

            100% {
                transform: translateX(200px);
                background-color: cyan;
            }
        }

        @keyframes move1 {
            0% {
                background-color: greenyellow;
                transform: translate(0px, 0px);
            }

            25% {
                transform: translate(800px, 500px) rotate(360deg);
                background-color: cyan;
            }

            50% {
                transform: translate(800px, 0px) rotate(0deg);
                background-color: darkred;

            }

            75% {
                transform: translate(0px, 500px) rotate(360deg);
                background-color: darkorchid;
            }

            100% {
                transform: translate(0px, 0px) rotate(0deg);
                background-color: darkorange;
            }
        }

        @keyframes text {
            0% {
                background-color: darkorchid;
                transform: translateX(0px);
            }

            100% {
                transform: translateX(-200px);
                background-color: green;
            }
        }



        @keyframes txt {
            0% {
                background-color: red;
                transform: translateX(0px);
            }

            100% {
                transform: translateY(100px);
                background-color: black;
            }
        }

        @keyframes txt1 {
            0% {
                background-color: darkred;

                transform: translate(0px, 0px);
            }

            25% {
                transform: translate(0px, -500px) rotate(360deg);
                background-color: darkorange;

            }

            50% {
                transform: translate(-800px, -500px) rotate(0deg);
                background-color: cyan;

            }

            75% {
                transform: translate(-800px, 0px) rotate(360deg);
                background-color: red;
            }

            100% {
                transform: translate(0px, 0px) rotate(0deg);
                background-color: greenyellow;

            }
        }

        @keyframes tst {
            0% {
                background-color: darkorange;
                transform: translateX(0px);
            }

            100% {
                transform: translateY(100px);
                background-color: rebeccapurple;
            }
        }


        @keyframes test {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
                background-color: yellow;
            }
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 3000PX;
        }

        div {
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: red;
        }

        [class^="text"] {
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;

        }

        .text1 {
            width: 200px;
            height: 200px;
            top: 150px;
            left: 150px;
            background-color: greenyellow;
            animation-name: move;

        }


        .text2 {
            top: 150px;
            right: 200px;
            animation-name: text;
            background-color: darkorchid;
        }

        .text3 {
            bottom: 150px;
            left: 150px;
            animation-name: txt;

        }

        .text4 {
            bottom: 150px;
            right: 200px;
            background-color: darkorange;
            animation-name: tst;
        }

        .text5 {
            top: 300px;
            left: 600px;
            animation-name: test;
            background-color: deepskyblue;
        }

        [class^="test"] {
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;

        }

        .test6 {
            animation-name: move1;
            top: 1150px;
            left: 150px;
        }



        .test9 {
            animation-name: txt1;
            top: 1550px;
            right: 150px;
            background-color: darkred;
        }

        .test10 {
            animation-name: test1;
            top: 1300px;
            left: 600px;
            background-color: deepskyblue;
        }
    </style>
</head>

<body>
    <div class="text1"></div>
    <div class="text2"></div>
    <div class="text3"></div>
    <div class="text4"></div>
    <div class="text5"></div>
    <div class="test6"></div>
    <div class="test9"></div>
    <div class="test10"></div>
</body>

</html>